<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />
        <q-toolbar-title>
          <q-btn flat to="/manage">冷晓磊博客后台管理系统</q-btn>
        </q-toolbar-title>

        <div>v{{version}}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered content-class="bg-grey-1">
      <q-list>
        <q-item-label header class="text-grey-8">导航菜单</q-item-label>
        <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import EssentialLink from 'components/EssentialLink'
import { mapState } from 'vuex'

export default {
  name: 'ManageMainLayout',

  components: {
    EssentialLink
  },

  data () {
    return {
      leftDrawerOpen: false,
      version: '1.0.0'
    }
  },
  computed: {
    ...mapState({
      essentialLinks: state => {
        return state.menus.menuList.manageMenuList.map(el => {
          return {
            title: el.name,
            link: el.url,
            caption: el.name,
            icon: el.img
          }
        })
      }
    })
  }
}
</script>
